<extend name="zh_cn:Public:base" />
<block name="title">
    <title>确认支付</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/PayPage/confirm.css?rev=1642f01dc780a558370275cc76b9aab6">
</block>
<block name="document">
    <div id="doc" class="container" data-value="{$payType}">
        <!--<div id="doc-header" class="navbar">
            <a href="/Home/OrderPage/index?hotel={$hotelId}&no={$bookNumber}" class="pull-left navbar-icon"><span class="iconfont icon-chevronleft"></span></a>
            <div class="navbar-title typo-text-white-deep">确认支付</div>
        </div>-->
        <div class="centeral-container vertical-middle-block">
            <div class="centeral-content vertical-middle-block-cell">
                <if condition="$error">
                    <div id="error">
                        <div class="row vertical-margin">
                            <div class="col-xs-12 text-sm text-center typo-text-black-light wrap-content">{$error}</div>
                        </div>
                    </div>
                <else />
                    <eq name="isUserLogined" value="0">
                        <div id="loginNeeded">
                            <div class="row vertical-margin">
                                <div class="col-xs-12 nowrap-content text-sm text-center typo-text-black-light">您还未登录</div>
                            </div>
                            <div class="row vertical-margin">
                                <a href="/Home/PublicPage/login?hotel={$hotelId}" class="col-xs-8 col-xs-offset-2 btn-primary btn-raised">登录</a>
                            </div>
                        </div>
                    <else/>
                        <div id="errorAlipay" class="hidden">
                            <div class="row vertical-margin">
                                <div class="col-xs-12 text-sm text-center typo-text-black-light wrap-content">很抱歉，无法在微信中进行支付宝支付，请点击右上角的菜单键，选择<span class="text-info">“在浏览器中打开”</span>进行支付宝支付。</div>
                            </div>
                        </div>
                        <div id="errorWechat" class="hidden">
                            <div class="row vertical-margin">
                                <div class="col-xs-12 text-sm text-center typo-text-black-light wrap-content">微信支付需要在微信浏览器中使用</div>
                            </div>
                        </div>
                        <div id="info" class="hidden">
                            <div class="row">
                                <div class="col-xs-12 nowrap-content text-center typo-title wrap-content">美住</div>
                            </div>
                            <div class="card horizontal-padding vertical-margin">
                                <div class="fixed-left-container">
                                    <div class="fixed-left">订单号：</div>
                                    <div class="nowrap-content">{$bookNumber}</div>
                                </div>
                                <div class="fixed-left-container">
                                    <div class="fixed-left">收款方：</div>
                                    <div class="nowrap-content">{$orderInfo.hotelName}</div>
                                </div>
                                <div class="fixed-left-container">
                                    <div class="fixed-left">商品：</div>
                                    <div class="nowrap-content">{$orderInfo.roomTypeName} - {$orderInfo.roomName}</div>
                                </div>
                                <div class="fixed-left-container">
                                    <div class="fixed-left">价格：</div>
                                    <span class="text-money">{$defaultSymbol}{$orderInfo.price}</span>
                                </div>
                            </div>
                            <div class="row">
                                <a id="pay" value="share" data-payparams='{$qrclientPayParams}' style="color: #fff;height: 39px;line-height: 39px;margin-top: 10px;" class="col-xs-12 btn-primary btn-raised">确认支付</a>
                            </div>
                        </div>
                    </eq>
                </if>
            </div>
        </div>
    </div>
</block>
<block name="extendFootJs">
    <script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
    // 钥匙包微信支付回调
    var qrWechatPayCallback = function(e){
        var bookNumber = '{$bookNumber}';
        var hotelId = '{$hotelId}';
        if (e == 1) {
            location.href = '/Home/PayPage/result.html?status=1&hotel=' + hotelId + '&no=' + bookNumber;
        } else if (e == 2) {
            location.href = '/Home/PayPage/result.html?status=2&hotel=' + hotelId + '&no=' + bookNumber;
        } else {
            location.href = '/Home/PayPage/result.html?hotel=' + hotelId + '&no=' + bookNumber;
        }
    }

    $(function() {        
        var hasError = '{$error}' !== '';
        var payparams = $('#pay').data('payparams');
        var isUserLogined = '{$isUserLogined}';
        if (hasError || isUserLogined === '0') {
            return;
        }

        var isWechatPay = $('#doc').data('value') === 0;
        var isWechatBrowser = function() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        };

        var bookNumber = '{$bookNumber}';
        var hotelId = '{$hotelId}';
        var orderHotel = '{$orderHotel}';

        // 支付宝支付
        if (!isWechatPay) {
            $('#pay').on('click', function(e) {
                params = {
                    orderNumber: bookNumber,
                    hotel: hotelId,
                    orderHotel: orderHotel,
                };
                ajaxRequest('/Home/Pay/alipay', params, 'POST', function(data) {
                    $('body').html(data.data);
                }, function(error) {
                    if (error.responseJSON === undefined) {

                    } else {

                    }
                });
            });
        }

        // 钥匙包微信支付方法 wechat.share()方法提供移动端调用
        var qrWechatPay = function(e) {
            var qrWechatData = JSON.stringify(payparams);
                wechat.share(qrWechatData);
        }

        // 钥匙包微信支付
        if(payparams !== '' && payparams !== undefined){
            $('#pay').on('click', qrWechatPay);
        }

        if (isWechatBrowser()) {
            if (isWechatPay) {
                // 在微信浏览器且微信支付
                $('#info').removeClass('hidden');
                wx.config({
                    debug: false,
                    appId: "{$signParams['appId']}",
                    timestamp: "{$signParams['timestamp']}",
                    nonceStr: "{$signParams['nonceStr']}",
                    signature: "{$signParams['signature']}",
                    jsApiList: ['chooseWXPay']
                });

                wx.ready(function() {
                    // 确定支付按钮
                    $('#pay').on('click', function(e) {
                        e.preventDefault();
                        wx.chooseWXPay({
                            timestamp: "{$payParams['timeStamp']}",
                            nonceStr: "{$payParams['nonceStr']}",
                            package: "{$payParams['package']}",
                            signType: "{$payParams['signType']}",
                            paySign: "{$payParams['paySign']}",
                            success: function(res) {
                                location.href = '/Home/PayPage/result.html?hotel=' + hotelId + '&no=' + bookNumber;
                            },
                            error: function() {
                                location.href = '/Home/PayPage/result.html?status=1&hotel=' + hotelId + '&no=' + bookNumber;
                            }
                        });
                    });
                });
            } else {
                $('#errorAlipay').removeClass('hidden');
            }
        } else {
            if (isWechatPay) {
                // 钥匙包微信支付 payparams 不为空
                if(payparams !== ''){
                    $('#info').removeClass('hidden');
                }else{
                    $('#errorWechat').removeClass('hidden');
                }

            } else {
                $('#info').removeClass('hidden');
            }
        }
    });
    </script>
</block>
